<template>
  <div id="showDiv04" ref="capture01">
    <div>
      <img src="@/assets/li/goods_matching.png" alt class="talentBanner" />
      <div class="topDiv">
        <div>
          <p>掌上精选智能匹配商品查询结果</p>
          <button @click="index">重新匹配</button>
        </div>
        <div>
          <span v-if="time != null">数据查询时间:{{ time }}</span>
          <span @click="history">查看历史匹配记录 ></span>
        </div>
      </div>
      <div>
        <p class="tips">
          仅展示商品排名靠前的
          <span>TOP5</span>，如需查看更多，请
          <el-popover placement="bottom" trigger="hover">
            <div class="message_content">
              <div class="popper_arrow"></div>
              <img src="@/assets/img/xiaozhushou_qr.jpg" class="codeImg" />
              <div>工作日：9:30--18:30</div>
            </div>
            <span slot="reference">联系客服</span>
          </el-popover>
        </p>
      </div>
      <div class="table_box">
        <div class="btn_group">
          <button @click="generatorImage"><span></span>分享</button>
          <button @click="export_data"><span></span>导出</button>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>排名</th>
              <th>商品</th>
              <th>售价</th>
              <th>佣金率</th>
              <th>总销量</th>
              <th>直播销量</th>
              <th>好评率</th>
              <th>预计每单赚</th>
              <th>带货达人数</th>
            </tr>
          </thead>
          <tbody v-if="goodsList.length != 0 && !loading">
            <tr v-for="(item, index) in goodsList" :key="index">
              <td>TOP{{ index + 1 }}</td>
              <td>
                <div class="goodsBox" @click="result(item.proid)">
                  <img :src="item.prologo" class="leftImg" v-errorImg:shop />
                  <div class="rightBox">
                    <SourceIcon :sourceid="item.fromId" class="img1" />
                    {{ item.protitle }}
                  </div>
                </div>
              </td>
              <td>￥{{ item.proprice }}</td>
              <td>{{ format_num(item.commission_rate * 100) }}%</td>
              <td>{{ format_num(item.volume) }}</td>
              <td>{{ format_num(item.live_volume) }}</td>
              <td>{{ format_num(item.good_rate * 100) }}%</td>
              <td>{{ format_num(item.proprice * item.commission_rate) }}</td>
              <td>{{ format_num(item.relation_author) }}</td>
            </tr>
          </tbody>
        </table>
        <div
          v-loading="loading"
          v-if="loading"
          class="loading"
          element-loading-text="数据雷达正在为您精准运算，请稍后~"
          element-loading-spinner="el-icon-loading"
        ></div>
        <div class="empty" v-if="goodsList.length == 0 && !loading">
          <img src="@/assets/liu/zw.png" />
          <p>抱歉,数据雷达暂未查询到符合您要求的商品，换个条件试试吧~</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import SourceIcon from "@/component/SourceIcon.vue";

export default {
  data() {
    return {
      time: window.localStorage.getItem("Uptime").substring(1, 20),
      goodsList: [],
      loading: false,
      productList: [],
      proIds: [],
    };
  },
  components: { SourceIcon },
  computed: {},
  watch: {},
  created() {
    this.productList = JSON.parse(window.localStorage.getItem("productList"));
    this.productList.forEach((item, index) => {
      this.proIds.push(item.proId);
    });
    this.getData();
    document.title = "智能找商品&智能分析服务平台-掌上精选";
  },

  methods: {
    getData() {
      this.loading = true;
      //商品单价
      let that = this;
      that.$axios
        .post("/api/product/SearchExtendOne1", {
          ProIdArray: this.proIds,
        })
        .then((res) => {
          that.loading = false;
          if (res.data.code == 0) {
            that.goodsList = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 分享
    generatorImage() {
      var that = this;
      const loading = this.$loading({
        lock: true,
        text: "导出中...",
        spinner: "el-icon-loading",
        customClass: "customClass",
      });
      var shareContent;
      shareContent = this.$refs.capture01; //需要截图的包裹的（原生的）DOM 对象
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
      var scale = 1;
      canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale * scale; //定义canvas高度 *缩放
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      var opts = {
        dpi: window.devicePixelRatio,
        scale: scale, // 添加的scale 参数
        useCORS: true,
        canvas: canvas, //自定义 canvas
        logging: true, //日志开关
      };
      html2canvas(shareContent, opts).then((canvas) => {
        let str;
        str = `《智能找商品}》.png`;
        canvas.toBlob(
          function (blob) {
            const eleLink = document.createElement("a");
            eleLink.download = str;
            eleLink.style.display = "none";
            // 字符内容转变成blob地址
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
          },
          "image/png",
          1
        );
        loading.close();
      });
    },
    // 导出
    export_data() {
      let that = this;
      let str = "";
      str = `排名,商品,售价,佣金率,总销量,直播销量,好评率,预计每单赚,带货达人数\n`;

      for (let i = 0; i < that.goodsList.length; i++) {
        str += `TOP${i + 1},${that.goodsList[i].protitle},${
          that.goodsList[i].proprice
        },${that.goodsList[i].commission_rate * 100}%,${
          that.goodsList[i].volume
        },${that.goodsList[i].live_volume},${
          that.goodsList[i].good_rate * 100
        }%,${that.goodsList[i].proprice * that.goodsList[i].commission_rate},${
          that.goodsList[i].relation_author
        }\n`;
      }
      var blob = new Blob([str], { type: "text/plain;charset=utf-8" }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement("a");
      link.href = object_url;
      let str_name = "";
      str_name = `《智能找商品》.csv`;
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    result(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
    history() {
      let router = this.$router.resolve({
        path: `/inAnalysis/historyGoods`,
      });
      window.open(router.href, "_blank");
    },
    index() {
      this.$router.push("/inAnalysis/SearchGoods");
    },
  },
};
</script>
<style lang="less" scoped>
#showDiv04 {
  background-color: #f5f5f5;
  padding-top: 14px;
  min-height: 100vh;
  .topDiv {
    box-sizing: border-box;
    width: 1200px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 20px;
    margin: auto;
    margin-top: 13px;
    div {
      display: flex;
      justify-content: space-between;
      p {
        font-size: 18px;
        color: #222222;
        font-weight: 600;
      }
      button {
        width: 88px;
        height: 32px;
        background-color: #ff7419;
        border-radius: 4px;
        font-size: 14px;
        color: #ffffff;
      }
      span:nth-child(1) {
        font-size: 14px;
        color: #888888;
      }
      span:nth-child(2) {
        font-size: 14px;
        color: #888888;
        cursor: pointer;
      }
    }
    div:nth-child(2) {
      margin-top: 11px;
    }
  }

  .tips {
    width: 1200px;
    font-size: 14px;
    color: #888888;
    margin: 14px 0px;
  }
  .tips {
    font-size: 14px;
    color: #888888;
    span {
      font-size: 14px;
      color: #fd7f2c;
      cursor: pointer;
    }
  }
  .table_box {
    padding: 14px 20px;
    background: #ffffff;
    min-height: 590px;

    .btn_group {
      margin-bottom: 14px;
      text-align: right;
      button {
        width: 70px;
        height: 32px;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        font-size: 14px;
        // line-height: 30px;
        box-sizing: border-box;
        color: #555;
        text-align: center;
      }
      button:nth-of-type(2) {
        color: #67ac5b;
        border: 1px solid #67ac5b;
      }
      > button:nth-child(1) {
        margin-right: 10px;
        span {
          display: inline-block;
          width: 14px;
          height: 14px;
          background: url("../../../assets/zhao/fenx.png") no-repeat;
          background-size: 100% 100%;
          margin-right: 4px;
          position: relative;
          top: 2px;
        }
      }
      > button:nth-child(2) {
        span {
          display: inline-block;
          width: 14px;
          height: 14px;
          background: url("../../../assets/zhao/daoc.png") no-repeat;
          background-size: 100% 100%;
          margin-right: 4px;
          position: relative;
          top: 2px;
        }
      }
      button:nth-of-type(1):hover {
        color: #777;
        span {
          background: url("../../../assets/zhao/fenx_h.png") no-repeat;
          background-size: 100% 100%;
        }
      }
      button:nth-of-type(2):hover {
        color: #80be76;
        border-color: #80be76;
        span {
          background: url("../../../assets/zhao/daoc_h.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .table {
      thead {
        th:nth-child(2) {
          width: 20%;
          text-align: left;
          padding-left: 10px;
        }
      }
      tbody {
        tr {
          text-align: center;
          height: 78px;
          font-family: DINAlternate-Bold;
          font-size: 15px;
          color: #222;
        }
        td:nth-child(2) {
          font-family: DINPro, -apple-system, BlinkMacSystemFont, Segoe UI,
            PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue,
            Helvetica, Arial, sans-serif;
        }
      }
    }
    // 商品
    .goodsBox {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      .leftImg {
        width: 50px;
        height: 50px;
        border-radius: 6px;
      }

      .rightBox {
        width: 200px;
        margin-left: 8px;
        text-align: left;
        font-size: 14px;
        color: #222222;
        font-weight: 600;
        position: relative;
        line-height: 20px;
        max-height: 40px;
        text-align: justify;
        overflow: hidden;
        padding-right: 12px;
        #SourceIcon {
          display: inline-block;
          /deep/img {
            width: 18px;
            height: 18px;
            display: inline-block !important;
          }
        }
      }
      .rightBox:before {
        position: absolute;
        right: 0;
        bottom: 0;
        content: "...";
      }
      .rightBox:after {
        position: absolute;
        right: 0;
        width: 10px;
        height: 20px;
        content: "";
        background-color: #fff;
      }
      .rightBox:hover {
        color: #ff924b;
      }
    }
  }
}
// 联系客服
.message_content img {
  width: 120px;
  height: 120px;
  margin-bottom: 6px;
}
.message_content {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 12px;
  letter-spacing: 0px;
  text-align: center;
}
</style>
